<template>
    <div>
        <!-- 用户信息列表 -->
        <el-container>
            <!-- 1-1 页面头部信息 -->
            <el-header class="header-all">
                <!-- 1-1-1 查询区域 -->
                <div style="display: inline">
                    <el-input placeholder="请输入要查询的用户姓名" v-model="funame" class="input-name"></el-input>
                    <el-select v-model="value" placeholder="请选择" class="sex-select">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                    <el-button type="primary" icon="el-icon-search" class="but-select" @click="query()">搜索</el-button>
                </div>
                <!-- 1-1-2 功能区域 -->
                <div class="div-header-but">
                    <el-button type="primary" class="but-select" icon="el-icon-plus" style="margin-right: 17px;"
                        @click="add('plus')" plain>新增</el-button>
                </div>
            </el-header>
            <!-- 列表区域 -->
            <el-main>
                <el-table :data="catalogList" v-loading="loading" ref="dictList" stripe>
                    <el-table-column prop="code" width="160px" label="编号" align="center"></el-table-column>
                    <el-table-column prop="id" width="220px" label="ID" align="center"></el-table-column>
                    <el-table-column prop="namecn" width="140px" label="名称" align="center"></el-table-column>
                    <el-table-column prop="parentid" width="220px" label="所属ID" align="center"></el-table-column>
                    <el-table-column prop="parentname" width="220px" label="所属类别" align="center"></el-table-column>
                    <el-table-column width="260px" label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button type="success" plain @click="upd(scope.$index, scope.row)">修改</el-button>
                            <el-button type="danger" plain @click="del(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>
        </el-container>
    </div>
</template>

<script>
export default {
    name: "catalog",
    data() {
        return {
            options: [{
                value: '0',
                label: '男'
            }, {
                value: '1',
                label: '女'
            }],
            dialogVisible: false,
            value: '',
            funame: "",
            catalogList: [],
            catalog: {
                "code": "",
                "id": "",
                "namecn": "",
                "parentid": "",
                "parentname": "",
            },
            showTable: [],
            loading: false,
        }
    },
    created() {
        this.getJsonUser()
        this.getJsonRole()
    },
    methods: {
        getJsonUser() {
            console.log("进入加载列表数据方法")
            var rul = "http://121.37.241.58:8883/logic/baseInfo/category/find"
            this.$axios.get(rul).then(re => {
                console.log(re.data)
                this.catalogList = re.data;
            });
        },
        getJsonRole() {
            // console.log("进入加载下拉框数据方法")
            // var rul = "http://121.37.241.58:8883/logic/baseInfo/sysUser/roleList"
            // this.$axios.get(rul).then(re => {
            //     console.log("-------")
            //     console.log(re.data)
            //     this.myRole = re.data
            //     this.myRole.push({ role: "全部" })
            // });
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },

    },

}
</script>

<!-- 1-1-1 开始对应每个控件及页面的样式进行绘制 -->
<style>
.input-name {
    width: 200px;
    margin-top: 20px;
    margin-left: 20px;
    padding: 0px;
    size: mini;
}

.but-select {
    margin-left: 10px;
}

.div-header-but {
    margin-left: 5px;
    margin-right: 20px;
    display: inline;
}

.header-all {
    padding: 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sex-select {
    margin-left: 5px;
    width: 90px;
}
</style>